<template>
  <div class="my-comment">
    <div class="my-comment-total">
      <div class="my-comment-replyTime">
        <el-text class="my-comment-time"
          ><el-icon><Clock /></el-icon>{{ comment.createTime }} :</el-text
        >
      </div>
      <div class="my-comment-content">
        <el-text size="large" line-clamp="2" truncated>{{
          comment.content
        }}</el-text>
      </div>
      <div class="my-comment-reply">
        <div v-if="comment.toUserId">
          <el-text>回复评论: {{ comment.replyComment }}</el-text>
        </div>
        <div v-else>
          <el-text truncated>评论书籍: {{ comment.replyNovel }}</el-text>
        </div>
      </div>
    </div>
  </div>
  <el-divider></el-divider>
</template>

<script>
export default {
  props: {
    comment: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style>
.my-comment {
  display: flex;
  align-content: center;
  margin-top: 10px;
}
.my-comment-total {
}
.my-comment-replyTime {
}
.my-comment-content {
  margin-top: 15px;
  margin-bottom: 10px;
}
.my-comment-reply {
  width: 658.4px;
  background-color: rgb(226, 229, 232);
} 
</style>